<template>
  <div class="box-parent">
    <!-- 模式切换 -->
    <div class="menu-item">
      <div class="menu-item-left">
        <p class="nav-title">当前模式</p>
        <div class="hw-box-msg2">{{ props.info.modeName }}</div>
      </div>
      <!-- <div class="hw-box-end-box" v-if="props.role == 1">
        <t-button theme="default" variant="outline" @click="visible1 = true">切换模式</t-button>
      </div> -->
    </div>
    <!-- 展览名称 -->
    <div class="menu-item">
      <div class="menu-item-left">
        <p class="nav-title">展览标题</p>
        <div>
          <div class="hw-box-msg2" v-show="!editType.type1">
            {{ props.info.name }}{{ props.info.subTitle ? '——' : '' }}{{ props.info.subTitle }}
          </div>
          <div class="hw-box-msg2" v-show="editType.type1">
            <t-input :maxlength="16" v-model="parmas.name" placeholder="请输入展览标题" style="width: 280px" />
            <span class="solider">——</span>
            <t-input :maxlength="30" v-model="parmas.subTitle" placeholder="请输入展览副标题" style="width: 280px" />
          </div>
        </div>
      </div>
      <div class="hw-box-end-box" v-if="props.role == 1">
        <t-button theme="default" variant="outline" @click="setdescription(1)">{{
          editType.type1 ? '保存' : '编辑名称'
        }}</t-button>
      </div>
    </div>
    <!-- 展览主图 -->
    <div class="menu-item">
      <div class="menu-item-left">
        <p class="nav-title">展览主图</p>
        <div>
          <div class="sign-box hw-box-style-flex hw-box-style-flex-clm">
            <img
              fit="cover"
              position="center"
              class="cover-img-box t-image--fit-contain t-image--position-center"
              :src="urls + props.info.coverUrl"
              alt=""
              v-if="props.info.coverUrl"
            />
            <div class="cover-img-box hw-flex-style-c-c" v-else>
              <span class="hw-box-msg2">暂无图片</span>
            </div>

            <span class="hw-box-msg1">支持2M以内JPG、PNG图片</span>
          </div>
        </div>
      </div>
      <div class="hw-box-end-box" v-if="props.role == 1">
        <t-upload accept=".png,.jpg" :max="1" :before-upload="onSelectChange1">
          <t-button theme="default" variant="outline">上传封面图</t-button>
        </t-upload>
      </div>
    </div>

    <!-- 展览概述 -->
    <div class="menu-item">
      <div class="menu-item-left">
        <p class="nav-title">展览概述</p>
        <div>
          <t-textarea
            :autosize="{ minRows: 3, maxRows: 6 }"
            :maxlength="100"
            v-model="description"
            placeholder="请输入展览简介"
            v-if="editType.type2"
          />
          <div class="hw-box-msg2" v-else>{{ props.info.description ? props.info.description : '未填写' }}</div>
        </div>
      </div>
      <div class="hw-box-end-box" v-if="props.role == 1">
        <t-button v-if="editType.type2" @click="editType.type2 = !editType.type2" theme="default" variant="outline">
          取消编辑
        </t-button>
        <t-button v-if="!editType.type2" theme="default" variant="outline" @click="setdescription(2)">{{
          editType.type2 ? '保存' : '编辑'
        }}</t-button>
        <t-button v-else @click="setdescription(2)">{{ editType.type2 ? '保存' : '编辑' }}</t-button>
        <!-- <t-button theme="default" variant="outline" @click="setdescription(2)">{{
              editType.type2 ? '保存' : '编辑简介'
            }}</t-button> -->
      </div>
    </div>
    <!-- 展览类型 -->
    <div class="menu-item">
      <div class="menu-item-left">
        <p class="nav-title">展览类型</p>
        <div>
          <div v-if="editType.type3">
            <t-select @change="onChange" v-model="parmas.typeId" placeholder="请选择展览类型">
              <t-option v-for="item in props.threes" :key="item.id" :value="item.id" :label="item.text"></t-option>
            </t-select>
            <!-- <t-cascader
              v-model="props.info.typeId"
              :options="props.threes"
              valueType="full"
              :keys="{
                value: 'id',
                children: 'children',
                label: 'text',
              }"
              clearable
              
            /> -->
          </div>
          <div v-else class="hw-box-msg2">
            {{ props.info.type ? props.info.type : '未设置' }}
          </div>
        </div>
      </div>
      <div class="hw-box-end-box" v-if="props.role == 1">
        <t-button theme="default" variant="outline" @click="setdescription(3)">{{
          editType.type3 ? '保存' : '更改'
        }}</t-button>
      </div>
    </div>

    <!-- 数字展厅 -->
    <div class="menu-item">
      <div class="menu-item-left">
        <p class="nav-title">数字展厅</p>
        <div>
          <div v-if="editType.type4">
            <t-input placeholder="请输入展厅链接" v-model="parmas.digitalShowroom" />
          </div>

          <div v-else class="hw-box-msg2">{{ props.info.digitalShowroom ? props.info.digitalShowroom : '未填写' }}</div>
        </div>
      </div>
      <div class="hw-box-end-box" v-if="props.role == 1">
        <t-button theme="default" variant="outline" @click="setdescription(4)">{{
          editType.type4 ? '保存' : '编辑'
        }}</t-button>
      </div>
    </div>

    <model v-if="visible1" @submit="submitType" :visible="visible1" @close="closeType" :type="props.info.mode" />
    <!-- <setAcatar @submit="submit" :visible="visible" @close="close" :imgCode="imgCode" @setImg="setImg" /> -->
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import { upLoadFn } from '@/utils/request/upload';
import model from './model.vue';
import { updateProject } from '@/api/project/project';
import { uploadBase } from '@/api/upLoad/index';
import setAcatar from '@/components/avatar/Setavatar.vue';
import { MessagePlugin } from 'tdesign-vue-next';
import { UpdateProject } from '@/api/model/project';
import { companyInfo, setCompany } from '@/api/company/company';
import { url, heards, urls } from '@/utils/request/upload';
import { AddIcon } from 'tdesign-icons-vue-next';
import { ref, nextTick, reactive } from 'vue';
import { useSettingStore, useUserStore, useProjectStore } from '@/store';

const webUrls: string = '?imageView2/2/w/134/h/134/format/webp';
const props = defineProps({
  info: {
    type: Object,
  },
  role: {
    type: Number,
  },
  threes: {
    type: Array,
  },
});
const emit = defineEmits(['updateInfo']);
const userStore = useUserStore();
const ProjectStore = useProjectStore();
const typeId = ref(0);
const visible = ref(false);
const visible1 = ref(false);
const imgCode = ref<string>('');
const types = ref(1);
const datas = reactive({
  file: {
    base64: '',
    contentType: '',
    fileName: '',
    format: '',
  },
});
const filelist2 = ref([]);
const editType = reactive({
  type1: false,
  type2: false,
  type3: false,
  type4: false,
});
const uploadAllFilesInOneRequest = ref(false);
const input = ref('');
const description = ref('');
const parmas = reactive({
  coverUrl: '',
  description: '',
  digitalShowroom: '',
  id: null,
  mode: 1,
  modeName: '',
  name: '',
  type: null,
  subTitle: '',
  typeId: 0,
});

const setInfo = async (e: UpdateProject, type: number) => {
  try {
    let res: any = await updateProject(e, localStorage.getItem('projectId'));
    if (res.statusCode == 200) {
      MessagePlugin.success('修改成功');
      parmas.id = props.info.id;
      switch (type) {
        case 1:
          for (let key in parmas) {
            parmas[key] = props.info[key];
          }
          parmas.mode = e.mode;
          parmas.modeName = e.mode == 1 ? '模版模式' : '自由模式';
          visible1.value = false;
          break;
        case 2:
          for (let key in parmas) {
            parmas[key] = props.info[key];
          }
          parmas.coverUrl = e.coverUrl;
          break;
        case 3:
          editType.type1 = false;
          //emit
          break;
        case 4:
          editType.type2 = false;
          break;
        case 5:
          editType.type3 = false;
          break;
        case 6:
          editType.type4 = false;
          break;

        default:
          break;
      }
      if (type == 3) {
        emit('updateInfo', parmas, 2);
      } else {
        emit('updateInfo', parmas);
      }
    }
    init();
  } catch {}
};
const isURL = (input) => {
  // 匹配URL的正则表达式
  var urlPattern = /^(https?|ftp):\/\/[^\s/$.?#].[^\s]*$/i;

  // 判断输入是否匹配正则表达式
  return urlPattern.test(input);
};
const setdescription = (e) => {
  switch (e) {
    case 1:
      if (editType.type1) {
        let type = parmas.name.trim();
        if (!type) {
          MessagePlugin.warning('请输入展览标题');
          return;
        }
        setInfo({ name: parmas.name, subTitle: parmas.subTitle }, 3);
      } else {
        setParmas();
        editType.type1 = true;
      }
      break;
    case 2:
      if (editType.type2) {
        setInfo({ description: parmas.description }, 4);
      } else {
        setParmas();
        editType.type2 = true;
      }
      break;
    case 3:
      if (editType.type3) {
        setInfo({ typeId: String(parmas.typeId) }, 5);
      } else {
        setParmas();
        editType.type3 = true;
      }
      break;
    default:
      if (editType.type4) {
        if (parmas.digitalShowroom) {
          let urlType = isURL(parmas.digitalShowroom);
          if (!urlType) {
            MessagePlugin.warning('请填写正确链接');
            return;
          }
        }
        setInfo({ digitalShowroom: parmas.digitalShowroom }, 6);
      } else {
        setParmas();

        editType.type4 = true;
      }
      break;
  }
};
const setParmas = () => {
  for (let key in parmas) {
    parmas[key] = props.info[key];
  }
  description.value = parmas.description;
};
const handleFail = (e) => {};
const onSelectChange = (e: any) => {
  setbase64(e, 1);
};
const setbase64 = (e: any, type?: number) => {
  let file = e[0];
  types.value = type;
  console.log(file.name); // 文件名称，有需求可处理
  console.log(file.type); // 文件类型，有需求可处理
  // 判断文件是否读取完毕，读取完毕后执行
  if (window.FileReader) {
    let reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function (e) {
      let base64String = e.target.result;
      imgCode.value = base64String;

      let types = file.type;
      types = types.split('/');
      datas.file = {
        base64: base64String,
        contentType: file.type,
        fileName: file.name,
        format: types[1],
      };
      uploadBase(datas.file).then((res: any) => {
        if (res.statusCode == 200) {
          setInfo({ coverUrl: String(res.data) }, 2);
        }
      });
      // visible.value = true;
    };
  }
};
const onSelectChange1 = (file: any) => {
  // setbase64(e, 2);
  if (
    file.type !== 'image/png' &&
    file.type !== 'image/jpg' &&
    file.type !== 'image/jpeg' &&
    file.type !== 'image/jpeg'
  ) {
    MessagePlugin.error('文件类型错误');
    return;
  }
  if (file.size / 1048576 > 2) {
    MessagePlugin.error('上传大小超出2M限制');
    return;
  }
  upLoadFn(file, 5).then((res) => {
    // console.log(res);
    if (res) {
      setInfo({ coverUrl: res }, 2);
      parmas.coverUrl = res;
      // formData.coverUrl = res;
    } else {
      MessagePlugin.error('创建成功');
    }
  });
};
const onChange = (e: any) => {
  let num = props.threes.findIndex((el) => {
    return el.id == e;
  });
  parmas.type = props.threes[num].text;
  console.log(parmas.type);
};
// const setImg = (e: any) => {
//   setbase64(e, types.value);
// };
// const submit = (e: String) => {
//   imgCode.value = e;
//   datas.file.base64 = e;
//   uploadBase(datas.file).then((res: any) => {
//     if (res.statusCode == 200) {
//       setInfo({ coverUrl: String(res.data) }, 2);
//     }
//   });
//   visible.value = false;
// };
const close = (e: any) => {
  visible.value = false;
};
const submitType = (e) => {
  console.log(e);
  setInfo({ mode: String(e) }, 1);
};
const closeType = () => {
  visible1.value = false;
};
</script>

<style lang="less" scoped>
.box-parent {
  display: flex;
  flex-direction: column;
  width: 100%;
  width: 100%;
}
.tags-box {
  display: flex;
}
.sign-box {
  display: flex;
  // align-items: center;
}
.upload-card-top {
  display: flex;
  align-items: center;
  margin-left: 0px;
  img {
    width: 288px;
    height: 176px;
    border-radius: 6px;
  }
  span {
    margin-left: 12px;
    font-size: 12px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.4);
    line-height: 20px;
  }
}

.cover-img-box {
  width: 288px;
  height: 176px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  background: #f3f3f3;
  border-radius: 4px;
  color: #00000042;
  border-radius: 6px;
  span {
    color: #00000042;
  }
}
.menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-bottom: 24px;
  margin-bottom: 24px;
  box-shadow: inset 0px -1px 0px 0px #f0f0f0;
}
.menu-item-left {
  display: flex;
  flex-direction: column;
  width: 70%;
}
.hw-box-end-box {
  display: flex;
  justify-content: flex-end;
  flex: 1;
}
.nav-title {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.38);
  line-height: 22px;
  margin-bottom: 8px;
}

.hw-box-msg1 {
  margin-top: 8px;
}
.hw-box-msg2 {
  display: flex;
  align-items: center;
  text-align: justify;
  margin-top: 0px;
  .solider {
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.8);
    line-height: 24px;
    margin: 0 16px;
  }
}
</style>
